<style>
    .w-120{
        width: 115px;
    }
    .conentStyle{
        padding: 10px;
        box-sizing: border-box;
    }
    .conentBg{
        padding: 20px;
        box-sizing: border-box;
        border-radius: 5px;
        background-color: #fff;
        min-height: 660px;
    }
    .borderNone{
        border: none;
    }
    .formBg{
        background-color: #F7F8FA;
        padding: 20px;
    }
    .layui-table-cell{
        height: auto;
    }
     .selectOption{
         height: 30px;
         width: 130px;
         color: #7a8191;
     }
</style>
<!-- 正文开始 -->
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-card-body">
            <!-- 头部操作栏 -->
            <form class="layui-form">
            <div class="layui-form lay-header">
                <div class="toolbar">
                    <div class="layui-form-item lay-query-content">
                        <div class="lay-query-box">
                            <div class="query-lt">

                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">物料名称：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuName" class="layui-input" type="text" placeholder="请输入物料名称"/>
                                    </div>
                                </div>
                                <div class="layui-inline">
                                    <label class="layui-form-label w-auto">商品编码：</label>
                                    <div class="layui-input-inline">
                                        <input name="skuCode" class="layui-input" type="text" placeholder="请输入商品编码"/>
                                    </div>
                                </div>
                            </div>
                            <div class="query-rt">
                                <div class="layui-inline">
                                    <button type="button" id="inventoryProductSearch" class="layui-btn icon-btn color-green" lay-filter="inventoryProductSearch" lay-submit>查询</button>
                                    <button type="reset" class="layui-btn icon-btn color-white" lay-filter="resets" lay-submit>重置</button>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
            </form>
            <!--数据表格-->
            <div class="table-bor">
                <table class="layui-table" id="inventoryProductTable" lay-filter="inventoryProductTable"></table>
            </div>
        </div>
    </div>
</div>

<!-- 表格操作列 -->
<script type="text/html" id="inventoryProductTableBar">
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="details">详情</a>
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="audit">库存分布</a>
</script>

<!-- 库存分布详情操作列 -->
<script type="text/html" id="stockDetailTableBar">
    <a class="layui-btn layui-btn layui-btn-xs" lay-event="particulars">分布明细</a>
</script>

<!-- 商品列表  详情 -->
<script type="text/html" id="productDetailsForm">
    <form lay-filter="productDetailsForm" class="layui-form model-form" style="padding: 25px;">
        <input name="id" type="hidden"/>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>序号</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="id"></span></div>
        </div>

        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>供应商名称</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="companyName"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>商品编号</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="productCode"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>商品规格码</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="skuSpec"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>企业货号</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="enterpriceCode"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>平台商品分类</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="categoryName"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>云仓库存</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="quantity"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>平台供货价</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="supplyPrice"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>市场指导价</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="marketPrice"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>最低活动价</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="activityPrice"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label"><span class="colorRed">*</span>国标条码</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="barcode"></span></div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"><span class="colorRed">*</span>服务商名称</label>
            <div class="layui-form-mid layui-word-aux"><span class="colorRed" id="stoCompany"></span></div>
        </div>
        <div class="layui-form-item">
            <label  class="layui-form-label">录入时间</label>
            <div class="layui-form-mid layui-word-aux"><span class="" id="createTime"></span></div>
        </div>
    </form>
</script>

<!-- 详情弹窗 -->
<script type="text/html" id="inventoryDistributionForm">
    <div class="layui-card-body">
        <div class="layui-form-item">
            <table class="layui-table" id="stockDistributedFormTable" lay-filter="stockDistributedFormTable"></table>
        </div>

        <div class="report-title">库存分布：</div>

        <div class="layui-form-item">
            <table class="layui-table" id="stockDistributedDetailFormTable" lay-filter="stockDistributedDetailFormTable"></table>
        </div>
    </div>
</script>

<!-- 库存明细 -->
<script type="text/html" id="repertoryDetailsTab">
    <div class="layui-fluid">
        <table class="layui-table" id="warehouseDetailsTable" lay-filter="warehouseDetailsTable"></table>
        <br>
        <span>库存明细</span>
        <table class="layui-table" id="repertoryDetailsTable" lay-filter="repertoryDetailsTable"></table>
    </div>
</script>

<!-- js部分 -->
<script>
    layui.use(['layer', 'form', 'table', 'admin','laydate','upload'], function () {
        var $ = layui.jquery;
        var layer = layui.layer;
        var form = layui.form;
        var table = layui.table;
        var config = layui.config;
        var admin = layui.admin;
        var upload = layui.upload;
        var laydate = layui.laydate;

        // 渲染表格
        var insTb = table.render({
            elem: '#inventoryProductTable',
            url: config.base + 'enterprisecab/order/admin/cloudInventoryProduct/list',
            page: true,
            cellMinWidth: 100,
            cols: [[
                {type: 'checkbox'}
                ,{field: 'skuName',title: '物料名称'}
                ,{field: 'productPic', width: "130", title: '图片'
                    ,templet:'<div><img src="{{ d.productPic}}" style="height: 80px;width: 80px;"></div>'}
                ,{field: 'productCode',  title: '商品编码'}
                ,{field: 'skuCode',title: '物料编号', templet(d) {
                        let code = "";
                        if(d.skuCodeAs != ""){
                            code = d.skuCodeAs;
                        }else{
                            code = d.skuCode;
                        }
                        return code;
                    }}
                ,{field: 'skuSpecValueNames',title: '规格码'}
                ,{field: 'categoryName',title: '商品分类'}
                ,{field: 'supplyPrice', title: '成本价'}
                ,{field: 'inventoryNumber', title: '库存'}
                ,{field: 'unitName',title: '单位'}
                ,{field: 'companyName', title: '供应商'}
                ,{field: 'createTime', sort: true, title: '添加时间'}
                ,{align: 'center', toolbar: '#inventoryProductTableBar', title: '操作', width: 200}
            ]],
            done: function (res, curr, count) {
            }
        });
        form.render('select');
        // 工具条点击事件
        table.on('tool(inventoryProductTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'details') { //详情
                showProductDetailsForm(data);
            } else if (obj.event === 'audit') { // 库存分布
                showInventoryDistribution(data);
            }
        });


        //监听排序
        table.on('sort(inventoryOutPlanTable)', function(obj){
            table.reload('inventoryOutPlanTable', {
                initSort: obj
                ,where: {
                    sort: obj.field
                    ,order: obj.type
                }
            });
        });

        // 搜索
        form.on('submit(inventoryProductSearch)', function (data) {
            insTb.reload({where: data.field,page: {curr: 1}},'data');
            return false;
        });


        // 显示商品详情弹窗
        function showProductDetailsForm(data) {
            admin.open({
                type: 1,
                area: ['1000px','800px'],
                offset: '65px',
                title: '商品详情',
                content: $('#productDetailsForm').html(),
                success: function (_data) {
                    admin.req('enterprisecab/order/admin/cloudInventoryProduct/detailById', {id:data.id},function (res) {
                        if (res.code == 200) {
                            $('#id').html(res.data.id)
                            $('#companyName').html(res.data.companyName)
                            $('#productCode').html(res.data.productCode )
                            $('#skuSpec').html(res.data.skuSpec)
                            $('#enterpriceCode').html(res.data.enterpriceCode)
                            $('#brandName').html(res.data.brandName)
                            $('#categoryName').html(res.data.categoryName)
                            $('#quantity').html(res.data.quantity)
                            $('#supplyPrice').html(res.data.supplyPrice)
                            $('#marketPrice').html(res.data.marketPrice)
                            $('#activityPrice').html(res.data.activityPrice)
                            $('#barcode').html(res.data.barcode)
                            $('#stoCompany').html(res.data.stoCompany)
                            $('#createTime').html(res.data.createTime)
                        }
                    },'GET');

                }
            });
        }

        // 显示库存分布
        function showInventoryDistribution(data) {
            admin.open({
                type: 1,
                area: ['1500px','800px'],
                offset: '65px',
                title: '库存分布',
                content: $('#inventoryDistributionForm').html(),
                success: function () {
                    console.log(data)
                    // 渲染表格
                    var orderDeliveryFormTb = table.render({
                        elem: '#stockDistributedFormTable',
                        data:[data],
                        cols: [[
                            {type: 'numbers'}
                            ,{field: 'skuName', sort: true, title: '物料名称', width: 150}
                            ,{field: 'productPic', width: "130", title: '图片'
                                ,templet:'<div><img src="{{ d.productPic}}" style="height: 50px;"></div>'}
                            ,{field: 'productCode', sort: true, title: '商品编码'}
                            ,{field: 'skuCode', sort: true, title: '物料编号', width: 150, templet(d) {
                                    let code = "";
                                    if(d.skuCodeAs != ""){
                                        code = d.skuCodeAs;
                                    }else{
                                        code = d.skuCode;
                                    }
                                    return code;
                                }}
                            ,{field: 'skuSpecValueNames', sort: true, title: '规格码', width: 160}
                            ,{field: 'categoryName', sort: true, title: '商品分类'}
                            ,{field: 'supplyPrice', sort: true, title: '成本价'}
                            ,{field: 'inventoryNumber', sort: true, title: '库存'}
                            ,{field: 'unitName', sort: true, title: '单位'}
                            ,{field: 'companyName', sort: true, title: '供应商', width: 150}
                            ,{field: 'createTime', sort: true, title: '添加时间', width: 160}
                        ]],
                    });
                    admin.req('enterprisecab/order/admin/cloudInventoryProduct/getProductInventoryBySkuCode', {skuCode:data.skuCode}, function (res) {
                        var orderDeliveryFormTbList = table.render({
                            elem: '#stockDistributedDetailFormTable',
                            //url: config.base +'enterprisecab/order/admin/cloudInventoryProduct/getProductInventoryBySkuCode?skuCode='+data.skuCode,
                            data: res.data.data,
                            cols: [[
                                {type: 'numbers',title: '序号'}
                                ,{field: 'warehouseCode', title: '仓库编号', width: 150}
                                ,{field: 'warehouseName', title: '仓库名称'}
                                ,{field: 'warehouseFeatureType', title: '仓库性质', width: 150,
                                    templet: function(d){
                                        if(d.warehouseFeatureType == 1){
                                            return "自建";
                                        }else if(d.warehouseFeatureType == 2){
                                            return "租赁";
                                        }else if(d.warehouseFeatureType == 3){
                                            return "借用";
                                        }else if(d.warehouseFeatureType == 4){
                                            return "临时";
                                        }

                                    }
                                }
                                ,{field: 'addr', title: '所在地区', width: 150}
                                ,{field: 'companyName', title: '所属企业', width: 160}
                                ,{field: 'quantity', title: '最小单位库存数'}
                                ,{field: 'unitName', title: '最小单位库存单位'}
                                ,{align: 'center', toolbar: '#stockDetailTableBar', title: '操作', width: 200}
                            ]]
                        });
                    }, 'GET');
                }
            });
        }

        //监听分布明细
        table.on('tool(stockDistributedDetailFormTable)', function (obj) {
            var data = obj.data;
            if (obj.event === 'particulars') {
                showInventoryParticularsForm(data);
            }
        });

        //弹出分布明细窗口
        function showInventoryParticularsForm(data){
            admin.open({
                type: 1,
                area: ['1400px','700px'],
                offset: '85px',
                title: '库存明细',
                content: $('#repertoryDetailsTab').html(),
                success: function () {
                    warehouseDetailsDataTab(data);
                    admin.req('enterprisecab/order/admin/cloudInventoryProduct/getBoxLabBySkuCodeAndWarehouseId?skuCode='
                        +data.skuCode+'&warehouseId='+data.warehouseId,{}, function (res) {
                        table.render({
                            elem: '#repertoryDetailsTable',
                            data: res.data.data,
                            cols: [[
                                {type: 'numbers'}
                                ,{field: 'boxPalletCode', title: '料箱编号', width: 150}
                                ,{field: 'labelQuantity', title: '库存数量'}
                                ,{field: 'packName', title: '库存单位', width: 150}
                                ,{field: 'amountQuantity', title: '最小单位库存数', width: 160}
                                ,{field: 'unitName', title: '最小单位库存单位'}
                                ,{field: 'areaName', title: '所在库区'}
                                ,{field: 'shelfCode', title: '所在货架编号'}
                                ,{field: 'layerNum', title: '所在所在层'}
                                ,{field: 'shelfSpaceCode', title: '所在货位编号'}
                            ]],
                        });
                    }, 'GET');
                }
            })
        }

        function warehouseDetailsDataTab(data){
            let storageWorkBinData= data;
            let warehouseDetailsData;
            admin.req('enterprisecab/order/admin/cloudInventoryProduct/getStorageWorkBinBySkuAndWarehouseId?skuCode='+data.skuCode+'&warehouseId='+data.warehouseId, {}, function (res) {
                if (res.code == 200) {
                    warehouseDetailsData = res.data.data
                    table.render({
                        elem: '#warehouseDetailsTable',
                        data:[storageWorkBinData],
                        cols: [[
                            {type: 'numbers'}
                            ,{field: 'warehouseCode', title: '仓库编号', width: 150}
                            ,{field: 'warehouseName', title: '仓库名称', width: 150}
                            ,{field: 'addr', title: '所在地区', width: 200}
                            ,{field: 'boxNum', title: '涉及货位', width: 100,templet: function(d){
                                    return res.data.data.boxNum;}}
                            ,{field: 'spaceNum', title: '涉及料箱', width: 100,templet: function(d){
                                    return res.data.data.spaceNum;}}
                        ]],
                    });
                } else {
                    layer.msg(res.msg, {icon: 2});
                }
            }, 'GET');
        }
    });
</script>